<template>
    <div class="basic-roam-page">
        <left-group :groupList="groupList" :parentId="parentId" :dirId="dirId" @changeGroup="changeGroup"
            @updateList="updateList">
        </left-group>
        <right-list :groupList="groupList" :roamList="roamList" :dirId="dirId" @changeGroup="changeGroup" @updateList="updateList">
        </right-list>
    </div>
</template>
<script>
    import dirImageDataApi from '@/views/js/api/dirImageDataApi'
    import imageDataApi from '@/views/js/api/imageDataApi'
    import LeftGroup from './component/LeftGroup'
    import RightList from './component/RightList'
    export default {
        components: {
            'left-group': LeftGroup,
            'right-list': RightList,
        },
        data() {
            return {
                //分类父Id
                parentId: '',
                //当前分类id
                dirId: '',
                //分组列表
                groupList: [],
                //当前分类的详情列表
                roamList: [],
            }
        },
        mounted() {
            this.updateList();
        },
        methods: {
            async updateList(id) {
                let params = {
                    code: 'AgCIM-pathRoam'
                }
                this.groupList = [];
                this.roamList = [];
                let res = await dirImageDataApi.treeByCode(params)           
                let arr = res.content;
                for (let i = 0; i < arr.length; i++) {
                    if ('other-AgCIM-pathRoam' === arr[i].imageStoreDirCode) {
                        this.parentId = arr[i].imageStoreDirId;
                    }
                }

                for (let i = 0; i < arr.length; i++) {
                    let o = {
                        id: arr[i].imageStoreDirId,
                        title: arr[i].imageStoreDirName,
                        checked: false
                    }
                    if (this.parentId == arr[i].imageStoreDirParentId) {
                        this.groupList.push(o);
                    }
                }

                if (!id && this.groupList.length > 0) {
                    id = this.groupList[0].id
                }
                if (id) {
                    this.changeGroup(id);
                }
            },

            async changeGroup(id) {
                if (id) {
                    this.dirId = id;
                }
                let res = await imageDataApi.selectAuthPageByDirId({
                    dirId: this.dirId,
                    rows: 1000,
                    page: 1
                });
                let rows = res.content.list;
                this.roamList = [];
                for (let i = 0; i < rows.length; i++) {
                    let rowObj = rows[i];
                    let info = JSON.parse(rowObj.imageStoreInformation);
                    let o = {
                        id: rowObj.imageStoreId,
                        name: rowObj.imageStoreName,
                        playing: false,
                        json: info, 
                        checked: false
                    };
                    this.roamList.push(o);
                }

            },
        },
    }
</script>
<style scoped>
    .basic-roam-page {
        display: flex;
    }
</style>